<template>
  <view class="component list-view">
    <scroll-view
      v-if="data?.list?.length"
      scroll-y
      scroll-with-animation
      class="list-scroll"
      :scroll-top="scrollTop"
    >
  
      <view class="item-wrap" v-for="(item, index) in data.list">
        <template v-if="type === 'default'">
          <CardView>
            <template #hd>
              <view class="card-hd flex align-center">
                <view class="ui-tag">{{ item.tag }}</view>
                <text class="text m-l">{{ item.store }}</text>
                <view class="operation">
                  <view
                    class="ui-button button-style--primary"
                    v-if="item.status == 1"
                    @click="handleOperation('startCount', item)"
                    >开始盘点</view
                  >
                  <view class="status-text text-gray" v-if="item.status == 0"
                    >未开始</view
                  >
                  <view class="status-text text-green" v-if="item.status == 2"
                    >盘点中</view
                  >
                  <view class="status-text text-gray" v-if="item.status == 3"
                    >盘点完成</view
                  >
                  <view class="status-text text-gray" v-if="item.status == 4"
                    >已汇总</view
                  >
                </view>
              </view>
            </template>
            <template #bd>
              <view class="form-item-wrap">
                <FormItemView
                  v-for="detailItem in item.details.list"
                  :data="{ label: detailItem.label+ ':', text: detailItem.text }"
                  :labelWidth="isEn ? 240 : 120"
                ></FormItemView>
              </view>
            </template>
          </CardView>
        </template>
        <template v-if="type === 'custom'">
          <slot>123123</slot>
        </template>
      </view>
    </scroll-view>
    <view class="list-empty" v-else>
      <slot name="empty">
        <EmptyView></EmptyView>
      </slot>
    </view>
  </view>
</template>

<script name="ListView" setup>
import CardView from '@/components/base-components/card-view/card-view.vue';
import FormItemView from '@/components/base-components/form-item-view/form-item-view.vue';
import EmptyView from '@/components/base-components/empty-view/empty-view.vue';
import useI18nStore from '@/store/modules/i18nStore';

const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  data: {
    type: Array,
    default: () => {
      return [];
    }
  },
  value: {
    type: Object,
    default: () => {
      return { index: 0 };
    }
  }
});
const {language} = useI18nStore();

const scrollTop = ref(0);

const emits = defineEmits(['operate']);

const handleOperation = (type, item) => {
  emits('operate', type, item);
};

const isEn = computed(() => {
  console.log('测试isEn', language, language.value, language.value === 'en');

  return language === 'en';
});

watch(() => props.data, (val) => {
  console.log('props.data', val);
})


</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";

.list-view {
  height: 100%;
  .list-scroll {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    height: 100%;

  }

  .card-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;

    > .text {
      color: #1A1A1A;
      font-size: 30rpx;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      // align-self: flex-start;
      margin-right: auto;
      text-wrap: wrap;

      // 文字不换行超出显示省略号
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;


    }

    .operation{
      flex-shrink: 0;
      margin-left: 16rpx;
    }
  }

  .form-item-wrap {
    display: flex;
    flex-direction: column;
    gap: 12rpx;

  }

  .status-text {
    color: var(--, #838599);
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 38rpx;
  }

  .list-empty {
    margin: 80rpx auto;
  }

  .item-wrap +.item-wrap {
    margin-top: 16rpx;
  }
  .text {
    &-gray{
      color: #838599;
    }

    &-green {
      color: $success-color;
    }
  }
}
</style>
